<script setup lang="ts">
import { Prompts } from "@artmate/chat";
import type { PromptsProps } from "@artmate/chat";
const items: PromptsProps["items"] = [
  {
    key: "1",
    label: 'Hot Topics',
    description: "What are you interested in?",
    children: [
      {
        key: "1-1",
        description: `What's new in X?`,
      },
      {
        key: "1-2",
        description: `What's AGI?`,
      },
      {
        key: "1-3",
        description: `Where is the doc?`,
      },
    ],
  },
  {
    key: "2",
    label: 'Design Guide',
    description: "How to design a good product?",
    children: [
      {
        key: "2-1",
        description: `Know the well`,
      },
      {
        key: "2-2",
        description: `Set the AI role`,
      },
      {
        key: "2-3",
        description: `Express the feeling`,
      },
    ],
  },
  {
    key: "3",
    label: 'Start Creating',
    description: "How to start a new project?",
    children: [
      {
        key: "3-1",
        label: "Fast Start",
        description: `Install Ant Design X`,
      },
      {
        key: "3-2",
        label: "Online Playground",
        description: `Play on the web without installing`,
      }
    ]
  }
];

const style = {
  item: {
    flex: "none",
    width: "calc(30% - 6px)",
    backgroundImage: `linear-gradient(137deg, #e5f4ff 0%, #efe7ff 100%)`,
    border: 0,
    color: '#000'
  },
  subItem: {
    background: "rgba(255,255,255,0.45)",
    border: "1px solid #FFF"
  }
};
</script>

<template>
  <div class="prompts">
    <Prompts title="Do you want?" :items="items" wrap :styles="style" />
  </div>
</template>

<style lang="scss" scoped>
.prompts {
  background: #FFFFFF;
  padding: 24px;
  --color-text-tertiary: rgba(var(--dark), 45%);
}
</style>
